<template>
  <el-dialog :visible.sync="opened" @close="close" :lock-scroll="false" append-to-body>
    <template #title>
      <div class="dialog-title">
        <div class="title">{{title}}</div>
      </div>
    </template>
    <div class="dialog-container">
      <div class="content" ref="dialogContent">
        <ul>
          <li class="item" v-for="(item, index) of data" :key="index" @click="selectedImgHandle(item)">
            <el-image :src="item.url" @load="imgLoadHandle"></el-image>
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { couponsList } from '../../../assets/demo/coupons/coupons'
export default {
  name: 'SelectCouponTemplate',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    num: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      title: '选择优惠券模板',
      opened: false,
      gapW: 10,
      gapH: 20,
      data: [],
      colHeightArr: [] // 列高度数组
    }
  },
  watch: {
    visible (val) {
      this.opened = !!val
      this.data = couponsList[this.num] // 这里赋值让页面回流, 让图片重新加载
      this.wallFallInit()
    }
  },
  methods: {
    // 瀑布流
    wallFallInit () {
      this.$nextTick(() => { // 重要, 在于页面渲染之后为了正确获取容器的宽高
        const { width: pageWidth } = this.getClient()
        const itemNodes = this.$refs['dialogContent'].children[0].children
        const itemWidth = itemNodes[0].offsetWidth // 200
        const gapW = this.gapW
        const columns = parseInt(pageWidth / (itemWidth + gapW)) // 取瀑布流能容纳的列
        for(let i = 0; i < columns; i++) {
          this.colHeightArr[i] = 0
        }
      })
    },
    getMinHeight () {
      const arr = this.colHeightArr
      let minHeight = arr[0]
      let index = 0
      for(let i = 0, l = arr.length; i < l; i++) { // 获取最小高度
        if (minHeight > arr[i]) {
          minHeight = arr[i]
          index = i
        }
      }
      return {
        index,
        minHeight
      }
    },
    getClient() {
      const dialogContent = this.$refs['dialogContent']
      return {
          width: dialogContent.clientWidth || 0,
          height: dialogContent.clientHeight || 0
      }
    },
    imgLoadHandle (e) {
      const { offsetWidth, offsetHeight } = e.path[0]
      const el = e.path[2] // 父层元素
      const arr = this.colHeightArr
      const { index, minHeight } = this.getMinHeight()
      const top = arr[index] + this.gapH + 'px'
      const left = (offsetWidth + this.gapW) * index + 'px'
      const height = offsetHeight + 'px' // 有个差异的5像素,不知道从哪儿来的
      el.style.cssText = `visibility: visible; top: ${top}; left: ${left}; height: ${height};`
      this.colHeightArr[index] = minHeight + offsetHeight + this.gapH
    },
    close () {
      this.$emit('update:visible', false)
    },
    selectedImgHandle (item) {
      this.$emit('select', item)
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-title {
  .title {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eeeded;
  }
}
.dialog-container {
  overflow: hidden;
  .content {
    overflow: hidden;
    height: 600px;
    ul {
      position: relative;
      li {
        width: 200px;
      }
      .item {
        overflow: hidden;
        position: absolute;
        visibility: hidden;
        left: 0;
        top: 0;
        transition: all .3s;
        box-sizing: border-box;
        box-shadow: 2px 2px 2px #999;
      }
    }
  }
}
</style>